﻿<div class="layui-card" id="lg-PlanList">
    <div class="layui-card-header"><i class="fa fa-home fa-fw"></i>开班计划</div>
    <div class="layui-card-body" id="">
        <!--查询条件-->
        <div class="lg-search lg-layout-row lg-layout-row-auto" skin="lg-form-inline">
            <div class="lg-search-item">
                <lg-form-date :data="{Title:'学年',Name:'Year'}" v-model:value="where.Year" format="year" ></lg-form-date>
            </div>
            <div class="lg-search-item">
                <lg-form-select :data="{Title:'学期',Options:options.Semester}" v-model:value="where.Semester" val-type="value"></lg-form-select>
            </div>
            <div class="lg-search-item">
                <lg-form-select :data="{Title:'班级',Options:options.Grades}" v-model:value="where.GradeId" val-type="value"></lg-form-select>
            </div>
            <div class="lg-search-item layui-input-inline" style="width:auto">
                <button class="layui-btn" type="button" v-on:click="OnSearch">搜索</button>
            </div>
        </div>
        <!--数据主体-->
        <div class="lg-form-box">
            <!--头部工具条-->
            <div class="lg-table-tool" id="toolbar">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm layui-btn-normal" v-on:click="OnAddPlan"><i class="fa fa-plus fa-fw"></i>添加</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" v-on:click="GetPlans"><i class="fa fa-refresh fa-fw"></i>刷新</button>
                </div>
            </div>
            <!--table-->
            <div class="lg-table-body">
                <table class="lg-table">
                    <thead>
                        <tr>
                            <th class="lg-table-check">
                                序号
                            </th>
                            <th>学年</th>
                            <th>学期</th>
                            <th>年级</th>
                            <th>计划</th>
                            <th>已报</th>
                            <th>开始</th>
                            <th>截止</th>
                            <th>权重</th>
                            <th style="width:100px;text-align:center">开放</th>
                            <th style="width:100px;text-align:center">受邀访问</th>
                            <th style="width:160px">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(row,index) in plans">
                            <td class="lg-table-check">
                                {{index+1}}
                            </td>
                            <td>{{row.Year}}</td>
                            <td>{{row.Semester}}</td>
                            <td>{{row.GradeFullName}}</td>
                            <td>{{row.Title}}</td>
                            <td>{{row.Register}}</td>
                            <td>{{row.StartDate}}</td>
                            <td>{{row.EndDate}}</td>
                            <td>{{row.SortNumber}}</td>
                            <td style="text-align:center">
                                <div :class="['layui-unselect layui-form-switch',{'layui-form-onswitch':row.IsOpen==1}]" v-on:click="OnSwitch(row,'IsOpen')">
                                    <em>{{row.IsOpen==1?'ON':'OFF'}}</em><i></i>
                                </div>
                            </td>
                            <td style="text-align:center">
                                <div title="计划是否开启受邀可报" :class="['layui-unselect layui-form-switch',{'layui-form-onswitch':row.IsInvite==1}]" v-on:click="OnSwitch(row,'IsInvite')">
                                    <em>{{row.IsInvite==1?'ON':'OFF'}}</em><i></i>
                                </div>
                            </td>
                            <td>
                                <a class="layui-btn layui-btn-xs layui-btn-normal" v-on:click="OnEdit(row)" title="编辑"><span class="fa fa-pencil-square-o fa-fw "></span></a>
                                <a class="layui-btn layui-btn-xs layui-btn-warm" v-on:click="OnDelete(row)" title="删除"><span class="fa fa-trash-o fa-fw"></span></a>
                                <a class="layui-btn layui-btn-xs" v-on:click="OnApply(row)" title="添加学生"><span class="fa fa-user-plus fa-fw"></span></a>
                                <a class="layui-btn layui-btn-xs layui-btn-danger" v-on:click="OnImport(row)" title="导入学生"><span class="fa fa-file-excel-o fa-fw"></span></a>
                                <a class="layui-btn layui-btn-xs layui-btn-primary" v-on:click="OnInvite(row)" title="访问授权设置"><span class="fa fa-gear fa-fw"></span></a>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="LgTable-NoData" v-if="plans.length==0||loading">
                    <p v-if="!loading">没有数据 ~</p>
                    <p v-if="loading"><img src="/Plugins/layer/theme/default/loading-2.gif" style="width:20px" /> 数据加载中...</p>
                </div>
            </div>
            <!--分页-->
            <div id="pager-planList" style="margin-top:-10px;"></div>
        </div>
    </div>
    <input type="file" ref="planListFileSelector" v-on:change="Import" class="hide" />
    <!--导入学生-->
    <div id="ImportApplyWrap" style="display:none;padding:15px" ref="ImportApplyWrap">
        <p>提示：</p>
        <div class="field-help">
            <blockquote>
                1、仅支持标准excel文件格式<br />
                2、重复项(身份证)则用新数据替换旧数据<br />
                3、导入列名需使用报名表模板中对应项的Name值<br />
                4、请确保列名一致且不含空字符！
            </blockquote>
        </div>
        <div class="field-foot">
            <input type="file" id="StudentTableSelector" class="hide" accept="xls,xlsx" v-on:change="Import" ref="planListFileSelector">
            <div class="fileUpBox" v-on:click="this.$refs.planListFileSelector.click()"><span class="fa fa-cloud-upload btn-file">上传</span></div>
        </div>
    </div>

    <!--控制面板-->
    <div>
        <div :class="['popupShadow',{'act':panel[0]}]" v-on:click="switchPanel(0)"></div>
        <div :class="['popupContainer-right',{'act':panel[0]}]">
            <div class="popupTitle">
                <h3><i class="fa fa-cog fa-fw" aria-hidden="true"></i>控制面板</h3>
                <span class="fa fa-angle-right" v-on:click="switchPanel(0)"></span>
            </div>
            <div class="popupContent" v-if="model!=null">
                <blockquote class="layui-elem-quote">{{model.Title}}</blockquote>
                <fieldset class="lg-field">
                    <div class="lg-form-item lg-field-inline">
                        <div class="lg-form-title">报名网址：</div>
                        <div class="lg-form-control">
                            <button class="layui-btn layui-btn-primary" v-on:click="onGetInviteUrl">获取</button>
                        </div>
                    </div>
                    <div class="lg-form-item lg-field-inline">
                        <div class="lg-form-title">信息完善通知：</div>
                        <div class="lg-form-control">
                            <button class="layui-btn layui-btn-primary" v-on:click="onSendSMSForPerfect">发送</button>
                        </div>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
</div>

<script type="module">
    import { freeForm } from '/plugins/lgform/lg.form.2.1.js'
    freeForm.addEventListener();
    frame.createPage({
        mounted: function () {
            var page = this;
            var app= Vue.createApp({
                data() {
                    return {
                        plans: [],
                        grades: [],
                        pageId: page.id,
                        options: { 
                            Semester: [
                                {
                                    Text: "不限",
                                    Value: ""
                                },
                                {
                                    Text: "1",
                                    Value: 1
                                },
                                {
                                    Text: "2",
                                    Value: 2
                                }],
                            Grades: [],  
                        },
                        loading: false,
                        where:{
                            Page:1,
                            Limit:10,
                            Year:"",
                            Semester:"",
                            Grades:""
                        },
                        checked: [],
                        importPlanId:0,
                        model:null,
                        panel:[false]
                    }
                },
                mounted: function () {
                    this.GetGrades();
                    this.GetPlans();
                },
                methods: {
                    GetGrades: function () {
                        lg.request({
                            url: "/api/sys/apply/GetGradesFromPlan",
                            success: res => {
                                if (res.code == 0) {
                                    this.options.Grades = res.data;
                                } else {
                                    layer.msg(res.msg, { icon: 2 });
                                }
                            }
                        })
                    },
                    GetPlans:function(){
                        this.loading = true;
                        this.plans = [];
                        lg.request({
                            url: "/api/sys/apply/GetPlanList",
                            method: "post",
                            data: this.where,
                            success: res => {
                                if (res.code == 0) {
                                    this.plans = res.data||[];
                                    this.setPage(res.count)
                                } else {
                                    layer.msg(res.msg, { icon: 2 });
                                }
                            },
                            complete: res => {
                                this.loading = false;
                            }
                        })
                    },
                    setPage:async function (count) {
                        var that = this;
                        layui.laypage.render({
                            elem: 'pager-planList'
                            , curr: that.where.Page
                            , limit: that.where.Limit
                            , count: count
                            , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                            , jump: function (obj, first) {
                                if (!first) {
                                    that.where.Page = obj.curr;
                                    that.where.Limit = obj.limit;
                                    that.GetPlans();
                                }
                            }
                        });
                    },
                    OnSwitch:function(item,key){
                        var data={Id:item.Id};
                        data[key] = item[key] == 1 ? 0 : 1;
                        lg.request({
                            url: "/api/sys/apply/EditPlan",
                            data: data,
                            method:"post",
                            success:res=>{
                                if(res.code==0){
                                    item[key] = data[key];
                                }else{
                                    layer.msg(res.msg,{icon:2})
                                }
                            }
                        }) 
                    },
                    OnAddPlan:function(){
                        frame.NavigateTo({
                            url: "/lgm/apply/plan/add",
                            title: "发布计划"
                        })
                    },
                    Refresh:function(){
                        this.GetPlans();
                    },
                    OnSearch:function(){
                        this.where.Page=1;
                        this.GetPlans();
                    },
                    OnEdit:function(item){
                        frame.NavigateTo({
                            url: "/lgm/apply/plan/edit/" + item.Id,
                            title: "编辑计划"
                        })
                    },
                    OnDelete:function(item){
                        layer.confirm('真的删除行么', function (index) {
                            layer.close(index);
                            lg.request({
                                url: "/api/sys/apply/deletePlan",
                                method: "post",
                                data: { id: item.Id },
                                success: res => {
                                    if (res.code == 0) {
                                        this.GetPlans()
                                    }
                                }
                            })  
                        });
                    },
                    OnApply:function(item){
                        frame.NavigateTo({
                            url: "/lgm/apply/apply/add/" + item.Id,
                            title: "添加学生"
                        })
                    },
                    OnImport:function(item){
                        this.importPlanId=item.Id;
                        layer.open({
                            type:1,
                            title:"导入报名记录",
                            area:["500px","300px"],
                            content: $("#ImportApplyWrap")
                        })
                    },
                    Import:function(){
                        var files = this.$refs.planListFileSelector.files;
                        if(files.length>0){
                            var fd = new FormData();
                            fd.append("file", files[0]);
                            fd.append("planId",this.importPlanId)
                            lg.postFile({
                                url: "/api/sys/apply/ImportApply",
                                data: fd,
                                success: res => {
                                    if (res.code == 0) {
                                        layer.closeAll();
                                        layer.msg(res.msg,{iocn:1});
                                        this.GetPlans();
                                    } else {
                                        layer.msg(res.msg, { iocn: 2 });
                                    }
                                }
                            })
                        }
                        this.importPlanId=0;
                        this.$refs.planListFileSelector.value='';
                    },
                    OnInvite:function(row){
                        if (row.IsInvite==1){
                            this.model = row;
                            this.switchPanel(1);
                        }
                        else{
                            layer.msg("未设置受邀访问的计划，不需要设置！",{icon:2,anim:6})
                        }
                    },
                    switchPanel:function(state){
                        if (state == undefined) {
                            this.panel[0] = !this.panel[0];
                        } else {
                            this.panel[0] = state
                        }
                    },
                    onGetInviteUrl:function(){
                        lg.requestAsync({
                            url: "/api/sys/apply/GetPlanInviteUrl",
                            data:{id:this.model.Id}
                        }).then(res=>{
                            if(res.code==0){
                                layer.alert(res.data);
                            }else{
                                layer.msg(res.msg,{icon:2})
                            }
                        })
                    },
                    onSendSMSForPerfect:function(){
                        lg.requestAsync({
                            url: "/api/sys/apply/SendSmsForPerfect",
                            data: { planId: this.model.Id },
                            method:"post"
                        }).then(res=>{
                            if(res.code==0){
                                layer.msg(res.msg,{icon:1})
                            }else{
                                layer.msg(res.msg,{icon:2})
                            }
                        })
                    }
                }
            })
            freeForm.regComponent(app);
            page.vm=app.mount("#lg-PlanList")
        },
        methods:{
            reload:function(){
                this.vm.GetPlans();
            }
        }
    }).mount();
</script>